export default {
  bind(el, binding, vnode) {
    // 在这里进行一些初始化设置，只调用一次
    // 如果需要钩子通讯请使用 el.dataset
    // 切记 参数中除了el，其他参数binding, vnode, oldVnode 都是只读的请不要修改
  },
  inserted(el, binding, vnode) {
    // 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
    // 使用 addEventListener 和 removeEventListener 来避免对已绑定的同种事件和用户源代码产生干扰
    let top, left, ofstx, ofsty, w, h, pw, ph;
    function effectDom() {
      return binding.value && binding.value.effectAreaId
        ? document.getElementById(binding.value.effectAreaId)
        : el;
    }
    const mousemoveEvent = function (e) {
      function valid(e, a, b) {
        if (e < 0) {
          return 0;
        } else if (e > a - b) {
          return a - b;
        }
        return e;
      }
      el.style.left = valid(e.pageX - left - ofstx, pw, w) + "px";
      el.style.top = valid(e.pageY - top - ofsty, ph, h) + "px";
    };
    const mousedownEvent = function (e) {
      top = el.parentNode.getBoundingClientRect().top;
      left = el.parentNode.getBoundingClientRect().left;
      ofstx = e.layerX;
      ofsty = e.layerY;
      w = el.clientWidth;
      h = el.clientHeight;
      pw = el.parentNode.clientWidth;
      ph = el.parentNode.clientHeight;
      document.addEventListener("mousemove", mousemoveEvent, false);
    };
    const mousemoveEvent2 = function (e) {
      el.style.left = e.pageX - ofstx + "px";
      el.style.top = e.pageY - ofsty + "px";
    };
    const mousedownEvent2 = function (e) {
      ofstx = e.layerX;
      ofsty = e.layerY;
      document.addEventListener("mousemove", mousemoveEvent2, false); //false是冒泡  true是捕获
    };
    const removeME = function () {
      document.removeEventListener("mousemove", mousemoveEvent, false);
      document.removeEventListener("mouseup", removeME, false);
      el.removeEventListener("mousedown", mousedownEvent, false);
    };
    const removeME2 = function () {
      document.removeEventListener("mousemove", mousemoveEvent2, false);
      document.removeEventListener("mouseup", removeME2, false);
      effectDom().removeEventListener("mousedown", mousedownEvent2, false);
    };
    if (binding.value && binding.value.limit) {
      // 开启父容器范围内拖拽
      el.addEventListener("mousedown", mousedownEvent, false);
      document.addEventListener("mouseup", removeME, false);
    } else {
      //不受限制的拖动
      effectDom().addEventListener("mousedown", mousedownEvent2, false);
      document.addEventListener("mouseup", removeME2, false);
    }
  },
  update(el, binding, vnode, oldVnode) {
    /*
		所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。
		指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
	*/

    // 在一些操作时使其恢复原位置
    if (binding.value && binding.value.origin) {
      el.style.top = binding.value.origin[1];
      el.style.left = binding.value.origin[0];
    }
  },
  componentUpdated(el, binding, vnode, oldVnode) {
    /*
		指令所在组件的 VNode 及其子 VNode 全部更新后调用。
	*/
  },
};
